<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>添加角色</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-form :model="role" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="名称" prop="name">
        <el-input v-model="role.name" placeholder="请输入用户名" @blur="isAlready" minlength="1"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input v-model="role.description" placeholder="请输入简介"></el-input>
      </el-form-item>
      <el-form-item label="排序序号" prop="sort">
        <el-input v-model="role.sort" placeholder="请输入排序序号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="enable">立即添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import CommonUtils from "@/views/utils/CommonUtils";

export default {
  name: "addRole",
  data() {
    return {
      enable: false,
      role: {
        name: '',
        sort: '',
        description: '',
      },
      rules: {
        sort: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    isAlready(){
      let name = this.role.name;
      axios
          .create(this.getJwt())
          .get("http://localhost:8000/roles/name?name="+name).then((res)=> {
        let data = res.data;
        if (data.state === 20000) {
          this.enable = false;
          return;
        }
        this.enable = true;
        CommonUtils.methods.isFail(data,this);
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = this.qs.stringify(this.role);
          axios
              .create(this.getJwt())
              .post("http://localhost:8000/roles/add-new",formData).then((res)=> {
                let data = res.data;
                if (data.state === 20000){
                  this.$message.success("恭喜您，添加成功")
                  this.resetForm(formName);
                  return;
                }
                CommonUtils.methods.isFail(data,this);
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getJwt(){
      return {'headers':{'Authorization': localStorage.getItem('jwt')}};
    }
  },
  mounted() {
    axios
        .create(this.getJwt())
        .get("http://localhost:8000/roles/addPer").then((res)=>{
          let data = res.data;
          if (data.state === 20000) return;
          CommonUtils.methods.isFail(data,this);
    })
  }
}
</script>

<style>

</style>